<script lang="ts" setup>
import CrudManager from "./component/crudManager/index.vue";

import UserColumns from '@/composables/user/tableColumns'
import { userFormOption, rules } from '@/composables/user/form'
import userDefaultData from '@/composables/user/defaultFormData'
import useUserApi from '@/composables/user/useUserApi'
import { SexEnum } from '@/composables/user/model.d'

const {
  updateData,
  getUserList
} = new useUserApi()

</script>

<template>
  <div style="height: 100%; max-height: 100%">
    <CrudManager 
      :columns="UserColumns" 
      name="用户管理"
      :formOption="userFormOption"
      :rules="rules"
      :defalutData="userDefaultData"
      @updateData="updateData"
      @getList="getUserList"
    >
      <template v-slot:sex="{ row }">
        <t-tag v-if="row.sex === SexEnum.male" theme="primary" variant="light">男性</t-tag>
        <t-tag v-if="row.sex === SexEnum.female" theme="success" variant="light">女性</t-tag>
      </template>
    </CrudManager>
  </div>
</template>
